<template>
  <!-- 促销活动 -->
  <section class="py-16 bg-gradient-to-r from-primary to-primary/80 text-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-8 md:mb-0">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold"
            >夏季促销活动</h2
          >
          <p class="mt-4 text-white/90 max-w-lg">
            限时优惠，全场乐谱8折起！购买任意3份乐谱，即可免费获得一份精选乐谱。活动期限：6月20日-7月20日。
          </p>
          <div class="mt-8 flex space-x-4">
            <div
              class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-center"
            >
              <div id="days" class="text-2xl font-bold">05</div>
              <div class="text-sm text-white/80">天</div>
            </div>
            <div
              class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-center"
            >
              <div id="hours" class="text-2xl font-bold">12</div>
              <div class="text-sm text-white/80">时</div>
            </div>
            <div
              class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-center"
            >
              <div id="minutes" class="text-2xl font-bold">34</div>
              <div class="text-sm text-white/80">分</div>
            </div>
            <div
              class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-center"
            >
              <div id="seconds" class="text-2xl font-bold">56</div>
              <div class="text-sm text-white/80">秒</div>
            </div>
          </div>
          <a
            href="#"
            class="mt-8 inline-block px-6 py-3 bg-white text-primary rounded-lg font-medium hover:bg-gray-100 transition-colors"
          >
            立即抢购
          </a>
        </div>
        <div class="md:w-1/2 relative">
          <div
            class="relative z-10 rounded-xl overflow-hidden shadow-2xl transform hover:scale-[1.02] transition-custom"
          >
            <img
              src="https://picsum.photos/800/600?random=40"
              alt="促销活动展示"
              class="w-full h-auto"
            />
            <div
              class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end"
            >
              <div class="p-6">
                <span
                  class="inline-block px-3 py-1 bg-secondary text-white text-sm font-medium rounded-full mb-3"
                  >限时优惠</span
                >
                <h3 class="text-white text-xl font-bold"
                  >贝多芬钢琴协奏曲全集</h3
                >
                <p class="text-white/80 mt-1">原价 ¥399，现价仅需 ¥299！</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup></script>
